<template>
	<div class="layout-padding-auto layout-padding-view">

			<el-form :inline="true" :model="from" class="align-center search-form ml-2 mb-2">
				<el-form-item class="label mt-4" :label="$t('order.dindan')">
					<el-input v-model="from.orderNo" clearable :placeholder="$t('client.inputResourceIdsTip')" style="width: 180px" />
				</el-form-item>
				<el-form-item class="label mt-4" :label="$t('order.riqi')">
					<el-date-picker
						style="width: 220px"
						v-model="from.time"
						type="daterange"
						range-separator="-"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						:disabled-date="disabledDate"
						:start-placeholder="$t('tenant.startTime')"
						:end-placeholder="$t('tenant.endTime')"
						class="custom-date-picker"
					/>
				</el-form-item>
				<el-form-item class="label mt-4" :label="$t('inProduction.materialCode')">
					<MaterialSelect style="width: 180px" v-model="from.materialCode" @change="changeMaterial" />
				</el-form-item>
				<el-form-item class="label mt-4" :label="$t('bar.supplierName')">
					<el-input v-model="from.supplier" clearable :placeholder="$t('client.inputResourceIdsTip')" style="width: 180px" />
				</el-form-item>
				<el-form-item class="label mt-4" :label="$t('mes.status')">
						<el-select v-model="from.status" placeholder="Select" style="width: 180px">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				<el-button icon="Search" class="buttons" type="primary" @click="getEndSerch">{{ $t('common.queryBtn') }}</el-button>
				<el-button icon="Refresh" @click="getReset" plain>{{ $t('common.resetBtn') }}</el-button>
                <el-button icon="Upload" type="success" plain @click="importFormDialogRef.openAddDialog()">{{$t('report.Import')}}</el-button>
				<el-button class="ml10" icon="Download" type="success" @click="exportxlsx">
					{{ $t('common.exportBtn') }}
				</el-button>
			</el-form>

				<el-table
					ref="tableRef"
					border
					id="out-table"
					:data="endList"
					:fit="true"
					stripe
					table-layout="fixed"
					header-align="center"
					v-loading="endLoading"
					highlight-current-row
					@selection-change="selectionChangeHandle"
					style="width: 100%; height: 92%"
					:header-cell-style="{
						color: '#1e293b',
						textAlign: 'center',
						fontWeight: '600',
						background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
						borderColor: '#e2e8f0',
						height: '30px',
					}"
					:cell-style="{
						textAlign: 'center',
						color: '#334155',
						borderColor: '#e2e8f0',
						background: '#fff',
						height: '30px',
					}"
				>
					<el-table-column type="selection" width="40" align="center" />
					<el-table-column prop="id" width="80" label="Id" show-overflow-tooltip />
					<el-table-column prop="poCode" :label="$t('bar.poCode')" width="180" show-overflow-tooltip>
						<template #default="scope">
							<el-tag :type="scope.row.isAbroad ? 'warning' : 'primary'" effect="light">{{ scope.row.poCode }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="poLine" width="120" :label="$t('bar.poLine')" show-overflow-tooltip />
					<el-table-column prop="estimatedArrivalDate"  width="160" :label="$t('upgrade.ArrivalDate')">
						<template #default="scope">
							{{ formatDate(scope.row.estimatedArrivalDate) }}
						</template>
					</el-table-column>
					<el-table-column prop="requiredQty" width="160" :label="$t('dailyDeliveryData.salesQty')">
						<template #default="scope">
							<el-tag type="success" effect="light">
								{{ scope.row.requiredQty }}
							</el-tag>
						</template>
					</el-table-column>
                    <el-table-column prop="shippingQty" width="160" :label="$t('upgrade.shipment')" show-overflow-tooltip >
                        <template #default="scope">
							<el-tag type="success" effect="dark">
								{{ scope.row.shippingQty }}
							</el-tag>
						</template>
                    </el-table-column>
					<el-table-column prop="shippingDate" width="160" :label="$t('upgrade.shipmentDate')" >
						<template #default="scope">
							{{ formatDate(scope.row.shippingDate) }}
						</template>
					</el-table-column>
					<el-table-column prop="status" :label="$t('mes.status')" width="100" show-overflow-tooltip>
						<template #default="scope">
							<el-tag :type="scope.row.status === '关闭' ? 'error' : 'success'" effect="light">{{ scope.row.status }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="supplierName" width="250" :label="$t('poheader.supplierName')" show-overflow-tooltip />
					<el-table-column prop="purDate" width="160" :label="$t('poheader.purDate')" show-overflow-tooltip >
						<template #default="scope">
							{{ formatDate(scope.row.purDate) }}
						</template>
					</el-table-column>
					<el-table-column prop="materialCode" width="160" :label="$t('agv.materialCode')">
						<template #default="scope">
							<el-tag type="primary" effect="light">{{ scope.row.materialCode }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="materialName" width="200" :label="$t('agv.materialName')"  show-overflow-tooltip>
						<template #default="scope">
							{{ scope.row.materialName }}
						</template>
					</el-table-column>
					<el-table-column prop="unit"  width="100" :label="$t('bom.unit')" />
					<el-table-column prop="spec" width="180" :label="$t('basMaterial.specification')">
						<template #default="scope">
							<el-tag type="success" effect="light">
								{{ scope.row.spec == ' ' ? '--' : scope.row.spec }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="requiredDate" width="160" :label="$t('so.deliverydate')" show-overflow-tooltip >
						<template #default="scope">
							{{ formatDate(scope.row.requiredDate) }}
						</template>
					</el-table-column>
                    <el-table-column prop="isAbroad" :label="$t('mes.isAbroad')" width="110" show-overflow-tooltip>
						<template #default="scope">
							<el-tag :type="!scope.row.isAbroad ? 'error' : 'success'" effect="dark">{{ !scope.row.isAbroad ? 'Y' : 'N' }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="asnCode" width="250" :label="$t('report.asnNo')" />
					<!--					<el-table-column prop="leftInstockQty" :label="$t('podetail.instockQty')" show-overflow-tooltip />-->
<!--					<el-table-column prop="leftInstockQty" width="160" :label="$t('podetail.leftInstockQty')" show-overflow-tooltip />-->
					<!-- <el-table-column prop="estimatedArrivalDate" width="160" :label="$t('upgrade.ArrivalDate')" show-overflow-tooltip /> -->
				</el-table>

					<el-pagination
						:current-page="data.endpage"
						:page-size="data.endSize"
						:page-sizes="[10, 20, 50, 100]"
						small
						background
						class="custom-pagination"
						layout="total, sizes, prev, pager, next, jumper"
						:total="data.endListTotal"
						@size-change="handleEndSizeChange"
						@current-change="handleEndCurrentChange"
					/>

	</div>
	    <importForm ref="importFormDialogRef" @getChildren="oncFun"/>
</template>

<script setup lang="ts">
import '/@/style/tailwind.css';
import MaterialSelect from '/@/components/mes/select/MaterialSelect.vue';
import { getPoAndShipDetailList } from '/@/api/platform/mes/wmsCheckstock';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { BasicTableProps, useTable } from "/@/hooks/table";

const importFormDialogRef = ref()
const importForm = defineAsyncComponent(() => import('./importForm.vue'));

const { t } = useI18n();
const from = reactive({
	status: [],
	time: [],
	orderNo: '',
	supplier: '',
	materialCode: '',
	materialName: '',
});
const editDialogRef = ref();
const materialDialogRef = ref();

const oncFun = () => {
  getEndList();
}
const getEndSerch = () => {
	data.endpage = 1;
	getEndList();
  bottomList.value = [];
  data.bottomListTotal = 0;
};

const formatDate = (date) => {
	if (!date) return '';
	const d = new Date(date);
	const year = d.getFullYear();
	const month = String(d.getMonth() + 1).padStart(2, '0');
	const day = String(d.getDate()).padStart(2, '0');
	return `${year}-${month}-${day}`;
};

const options = ref([
	{ label: 'All', value: '' },
	{ label: t('qms.open'), value: 'po_open' },
	{ label: t('qms.close'), value: 'po_close' },
]);
//给options默认值为po_open
from.status = 'po_open';

const data = reactive({
	endpage: 1,
	endSize: 20,
	endListTotal: 0,
	bottompage: 1,
	bottomSize: 20,
	bottomListTotal: 0,
	poCode: '',
	poLine: '',
	id: '',
});

const endList = ref([]);
const endLoading = ref(false);
const bottomList = ref([]);
const getEndList = async () => {
	endLoading.value = true;
	try {
		const params = {
			current: data.endpage,
			size: data.endSize,
			materialCode: from.materialCode,
      		poCode: from.orderNo,
			startTime: (from && from.time && from.time[0]) || '',
			endTime: (from && from.time && from.time[1]) || '',
			supplierName: from.supplier,
			status: from.status,
		};
		const res = await getPoAndShipDetailList(params);
		endList.value = res.data.records;
		data.endListTotal = res.data.total;
	} catch (e) {
		console.log(e);
	} finally {
		endLoading.value = false;
	}
};

const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: ""
})

const {
  downBlobFile,
  tableStyle
} = useTable(state)
const exportxlsx = () => {
  downBlobFile('/wms/poShip/ExportPoShipDetails', {
	'materialCode': from.materialCode,
    'poCode': from.orderNo,
	'startTime': (from && from.time && from.time[0]) || '',
	'endTime': (from && from.time && from.time[1]) || '',
	'supplierName': from.supplier,
	'status': from.status,
  }, 'poShipDetail' + getNowFormatDate() + '.xlsx');
}
function getNowFormatDate() {
  var date = new Date();
  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
  const month = String(date.getMonth() + 1).padStart(2, '0');

  // 获取日期
  const day = String(date.getDate()).padStart(2, '0');

  // 拼接成 年月日时分秒 格式的字符串
  var currentdate = year + month + day
    + date.getHours() + date.getMinutes()
    + date.getSeconds();
  return currentdate;
}

const handleEndSizeChange = (val) => {
	data.endSize = val;
	getEndList();
};
const handleEndCurrentChange = (val) => {
	data.endpage = val;
	getEndList();
};
const getReset = () => {
	from.time = [];
	from.orderNo = '';
	from.supplier = '';
	from.status = 'All';
	from.materialCode = '';
	from.materialName = '';
	getEndList();
};

onMounted(() => {
	getEndList();
});
</script>
